<template>
  <div>
    <div class="nav">
      <van-icon name="arrow-left" @click="fh" />
      <P class="nav-t">设置</P>
    </div>
    <div class="center">
      <div class="center-t">
        <div>
          <span class="img"></span>
          <p>yujia1130</p>
        </div>
        <div class="box">
          <span class="box-l">账户与安全</span>
          <span class="box-r">
            手机绑定与更换
            <van-icon name="arrow" />
          </span>
        </div>
      </div>
      <span class="tips"></span>
      <div class="center-c">
        <ul>
          <li>
            <span class="box-l">账户与安全</span>
            <img class="box-x" @click="qqa" :src="image1" alt />
          </li>
          <li>
            <span class="box-l">影评/话题提醒</span>
            <img class="box-x" @click="qqb" :src="image2" alt />
          </li>
          <li>
            <span class="box-l">系统通知</span>
            <img class="box-x" @click="qqc" :src="image3" alt />
          </li>
          <li class="uc">
            <span class="box-l">系统通知</span>
            <img class="box-r" @click="qq" :src="image" alt />
          </li>
        </ul>
      </div>
      <span class="tips"></span>
      <div class="center-b">
        <span class="box-l">关于</span>
        <van-button type="primary" block>退出登录</van-button>
      </div>
    </div>
  </div>
</template>

<style lang="scss">
.nav {
  position: relative;
  margin-left: 42px;
  margin-top: 20px;
  .van-icon {
    opacity: 0.6;
    font-size: 32px;
    color: #fff;
    display: inline-block;
  }
  p {
    display: inline-block;
    font-size: 32px;
    color: #fff;
    position: absolute;
    left: 54%;
    transform: translatex(-80px);
    top: -5px;
  }
}
.center {
  text-align: center;
  .center-t {
    margin-top: 69px;
    margin-bottom: 93px;
    .img {
      display: inline-block;
      width: 146px;
      height: 146px;
      background-color: #fff;
      border-radius: 50%;
      background: url(~@/assets/images/wzb/info/ps.png) no-repeat center;
      background-size: 100% 100%;
    }
    p {
      font-size: 32px;
      color: #ffffff;
    }
    .box {
      width: 670px;
      margin: 0 40px;
      margin-top: 93px;
      .box-l {
        float: left;
        font-size: 28px;
        color: #ffffff;
      }
      .box-r {
        float: right;
        font-size: 28px;
        color: #ffffff;
        opacity: 0.67;
        .van-icon {
          vertical-align: middle;
        }
      }
    }
  }
  .tips {
    margin-top: 22px;
    margin-bottom: 38px;
    display: inline-block;
    height: 12px;
    width: 100%;
    background: #33363d;
  }
  .center-c {
    width: 670px;
    margin: 0 40px;
    li {
      width: 100%;
      height: 50px;
      margin-bottom: 50px;
      .box-l {
        float: left;
        font-size: 28px;
        color: #ffffff;
      }
      .box-r {
        float: right;
        width: 86px;
        height: 50px;
        color: #ffffff;
      }
      .box-x {
        float: right;
        width: 86px;
        height: 50px;
        color: #ffffff;
      }
    }
    .uc {
      margin-bottom: 38px;
    }
  }
  .center-b {
    width: 670px;
    margin: 0 40px;
    .box-l {
      float: left;
      font-size: 28px;
      color: #ffffff;
      margin-bottom: 50px;
    }
    .van-button {
      background-image: linear-gradient(150deg, #f25b86 0%, #f1ac5e 100%);
      box-shadow: 0 0 8px 2px rgba(242, 109, 125, 0.18);
      border-radius: 12px;
      border-radius: 12px;
      height: 80px;
    }
  }
}
</style>

<script>
import hsai from "../../assets/images/wzb/centent/true.png";
import nay from "../../assets/images/wzb/centent/false.png";
export default {
  data() {
    return {
      image: hsai,
      image1: hsai,
      image2: hsai,
      image3: nay
    };
  },
  methods: {
    qq() {
      if (this.image == hsai) {
        this.image = nay;
      } else {
        this.image = hsai;
      }
    },
    qqa() {
      if (this.image1 == hsai) {
        this.image1 = nay;
      } else {
        this.image1 = hsai;
      }
    },
    qqb() {
      if (this.image2 == hsai) {
        this.image2 = nay;
      } else {
        this.image2 = hsai;
      }
    },
    qqc() {
      if (this.image3 == hsai) {
        this.image3 = nay;
      } else {
        this.image3 = hsai;
      }
    },
    fh() {
      this.$router.push({ path: "/user" });
    }
  },
  created() {}
};
</script>

